<template>
  <div class="top-content">
    <ul v-if="data.length>0">
        <li v-for="(item,index) in data" :key="index">
            <span class="index">{{index+1}}</span>
            <div class="desc">
                {{item.Key}}
            </div>
            <span class="score" v-if="rankType === 'score'">{{Math.floor(item.Data1)}}分</span>
            <span class="score" v-else-if="rankType === 'time'">{{Math.floor(item.Data1/3600)}}小时</span>
            <span class="score" v-else-if="rankType === 'percent'">{{item.Data1}}%</span>
            <span class="score" v-else>{{Math.floor(item.Data1)}}次</span>
        </li>
    </ul>
    <a-empty v-else style="margin-top:100px;" />
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    rankType:{
      type:String,
      default:'score'//1是平均分，2是时间，3是次数4
    }
  },
  mounted () {
      // console.log(this.data);
  },
};
</script>

<style lang="stylus" scoped>
.top-content {
    margin-top:25px;
    height:350px;
    overflow:auto;
    li {
        padding:15px 10px;
        border-bottom: 1px solid #e8e8e8;
        overflow hidden;
        position:relative;
    }
    .index {
        font-size:16px;
        color:#333;
        margin-right:15px;
        float left
    }
    .desc {
      float left
      overflow:hidden;
      max-width:80%;
    }
    .score {
        font-size:16px;
        color:#333;
        float:right;
        margin-right:15px;
        float:right;
    }
}
</style>